{css href="/static/index/css/style.css" /}
{layout name="layout"}
{css href="/static/index/css/backdrop.css" /}
{js href="/static/index/js/backdrop.js" /}

<div class="content">
    <!--    大图-->
    <div class="index_top_cargo"></div>
    {include file='public/nav'}
    <!--    nav-->
    <div class="container ">
        <div class="heading"><img src="/static/index/image/mark.png" alt=""> <span>干货分享</span> </div>
        <br><br>


<!--        <div class="container-fluid">-->
<!--            <div class="row" style="text-align: center;">-->
<!--                <div style="display: block">-->
<!--                    <div class="search d1">-->
<!--                        <form>-->
<!--                            <label for="search_input"></label>-->
<!--                            <input id="search_input" type="text" placeholder="搜索干货~">-->
<!--                            <button type="submit"></button>-->
<!--                        </form>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->


        <div class="container-fluid">
            <div class="row" >
                <div class="wrapper horizontal demo3">
                    <ul class="container1">
                        {volist name="cargos" id="cargo"}
                        <li class="cards-list">
                            <!--                            <div class="img">-->
                            <!--                                <img src="image/p1.png" alt="">-->
                            <!--                            </div>-->
                            <div class="main-con">
                                <h4 class="name"><a href="details/{$cargo.article_id}">{$cargo.article_name}</a> </h4>
                                <p class="content">
                                    {$cargo.article_content_text}
                                </p>
                                <p><a style="color: blanchedalmond;" href="details/{$cargo.article_id}"> ———————查看全文———————— </a></p>
                                <p class="label">{$cargo.article_create_time|substr=5,11}</p>
                            </div>
                        </li>
                        {/volist}

                    </ul>
                    <i class="btn-direct btn-left">
                        <span class="shift-left"></span>
                    </i>
                    <i class="btn-direct btn-right">
                        <span class="shift-right"></span>
                    </i>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    (function () {
        let $ = function(el) {
            try {
                var item = document.querySelectorAll(el);
                return item.length <= 1 ? item[0] : item;
            } catch (err) {
                console.log(err)
            }
        }
        var backdrop3 = new Backdrop($('.demo3>.container1'), {
            transition: {
                value: '500ms cubic-bezier(0.34, 1.56, 0.64, 1)', // easeOutBack
                waitForTransition: true,
            },
            autoplay: {
                enable: true,
                delay: 5000,
            },
            isClickSlide: true,
            opacity: .5,
            scale: .9,
            transformOrigin: 'center bottom',
            navigation: {
                nextEl: $('.demo3 .btn-right'),
                prevEl: $('.demo3 .btn-left')
            }
        });
    }());
</script>
{include file="public/totop"}
<br><br><br><br><br><br><br><br><br><br><br><br>